<template>
  <div class="notebook2" style="padding-top: 55px; padding-bottom: 100px; overflow: hidden">
    <!-- 头部 -->
    <div style="
        padding: 10px 0;
        position: fixed;
        top: 0;
        width: 100%;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        box-shadow: 0 0 5px;
        z-index: 999;
      ">
      <div style="margin-left: 20px; position: relative; top: 0; left: 0 ">
        <div style="
            position: absolute;
            top: -5px;
            left: 0;
            border-left: 2px solid black;
            border-top: 2px solid black;
            width: 10px;
            height: 10px;
            transform: rotate(-45deg);
           
          " @click="back"></div>
      </div>
      <div style="display: flex">
        <div style="
            margin-left: 10px;
            margin-right: 5px;
            border-radius: 50px;
            overflow: hidden;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          ">
          <img style="width: 100%; height: auto" :src="data?.author.p" alt="" />
        </div>
        <div>
          <div style="display: flex">
            <div style="
                text-wrap: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100px;
              ">
              {{ data?.author.n }}
            </div>
            <span style="margin-left: 6px; color: rgb(212, 185, 117)">LV.{{ data?.author.lvl }}</span>
          </div>

          <div style="font-size: 10px; color: rgb(154, 154, 154)">
            连续打卡{{ signIn }}天
          </div>
        </div>
        <div class="Attention" style="
            text-align: center;
            line-height: 30px;
            font-weight: 700;
            font-size: 14px;
            width: 75px;
            height: 30px;
            border-radius: 50px;
            margin-left: 5px;
          " @click="changeisAttention" :class="{ active: isAttention }">
          {{ isAttention ? "已关注" : "关注" }}
        </div>
      </div>
      <div style="margin-right: 10px; font-size: 30px; font-weight: 700">
        ···
      </div>
    </div>

    <!-- 展示图 -->
    <div style="width: 100%; margin-bottom: 10px">
      <div style="display: flex; overflow-x: auto">
        <img class="big-img" v-for="(item, index) in imgData" :key="index" :src="item.u" />
      </div>
    </div>

    <!-- 文章内容 -->
    <div style="
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 15px;
      ">
      <div style="width: 90%">
        {{ data?.title }}
        <van-icon v-if="store.like.indexOf(Number(data?.id)) == -1" name="like-o" size="20px" color="#000"
          @click="addLikeList(Number(data?.id))" />
        <van-icon v-else name="like" size="20px" color="#e4393c" @click="store.removeLikeList(Number(data?.id))" />
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center">
      <div style="width: 90%; font-size: 14px; line-height: 1.5">
        <!-- <span v-for="(item, index) in tagData" :key="index"
                    style="margin-bottom: 10px; width: 300px; text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden; display: inline-block; line-height: 18px; color: rgb(54,120,202); font-size: 16px; margin-right: 10px;">
                    <img style="height: auto; width: 15px; vertical-align: bottom;"
                        src="https://i1.douguo.com//upload/banner/1525671768.png" />
                    {{ item.c }}
                </span> -->
        <div class="text">
          {{ methodData }}
        </div>
      </div>
    </div>

    <!-- 相关笔记 -->
    <h2 style="
        width: 100%;
        box-sizing: border-box;
        padding-left: 30px;
        margin-top: 50px;
      ">
      相关笔记
    </h2>
    <div style="width: 100%; margin-top: 20px">
      <div class="clearfix" v-for="(item, index) in correlationData" :key="index" @click="getID(item.note.id)" style="
          float: left;
          margin-bottom: 10px;
          margin-left: 10px;
          width: 46%;
          border-radius: 10px;
          box-shadow: 0 0 3px;
          overflow: hidden;
        ">
        <div>
          <img style="
              width: 100%;
              height: 150px;
              vertical-align: bottom;
              padding: 0;
            " :src="item.note.image_u" alt="" @click="clickcl (item.note.id)"/>
        </div>
        <h4 style="
            margin-left: 10px;
            margin-top: 6px;
            text-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          ">
          {{ item.note.title }}
        </h4>
        <div style="display: flex; margin-top: 10px; margin-bottom: 10px">
          <div style="
              margin-left: 10px;
              width: 20px;
              height: 20px;
              border-radius: 50px;
              overflow: hidden;
            ">
            <img :src="item.note.author.p" alt="" />
          </div>
          <div style="
              text-wrap: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-left: 10px;
              line-height: 22px;
            ">
            {{ item.note.author.n }}
          </div>
        </div>
        <div style="margin: 0 0 0 60%">
          <van-icon v-if="store.like.indexOf(Number(item.note.id)) == -1" name="like-o" size="20px" color="#000"
            @click="getID(item.note.id)" />
          <van-icon v-else name="like" size="20px" color="#e4393c" @click="store.removeLikeList(Number(item.note.id))" />
          <div style="
              display: inline-block;
              padding-bottom: 2px;
              padding-left: 5px;
            ">
            {{ item.note.image_h }}
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <!-- <div
      style="
        background-color: white;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        box-shadow: 0 0 5px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
      "
    > -->
    <!-- <div>
        <input
          style="
            margin-left: 25px;
            margin-right: 10px;
            border: 0;
            background-color: rgb(245, 245, 245);
            width: 130px;
            height: 30px;
            border-radius: 50px;
            outline: none;
            padding: 0 0 0 10px;
            box-sizing: border-box;
          "
          type="text"
          placeholder="说点什么…"
        />
      </div>
      <div style="margin-right: 10px">评论</div>
      <div style="margin-right: 10px">点赞人数</div>
      <div @click="getCollection(data.id)">收藏</div> -->
    <!-- </div> -->
  </div>
</template>

<script setup lang="ts">
import { useHomeStore } from "@/stores/home";
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
import { useLogin, useLogining } from "../stores/index";
let uselogin: any = useLogin();
let uselogining: any = useLogining();
const store = useHomeStore();
let data: any = ref<any>(null);
let userid: string = "";
let router: any = useRouter();
let route: any = useRoute();
let signIn: any = ref<number>(0)


// 关注
let isAttention: any = ref<boolean>(false);

// 改变关注状态
let changeisAttention = () => {
  if (uselogining.isLogining == 1) {
    // 关注
    if (!isAttention.value) {
      store.addFollowList(Number(userid));
    } else {
      // 取消关注
      store.removeFollowList(Number(userid));
    }
    isAttention.value = !isAttention.value;
  } else {
    // 跳转到登录界面
    uselogin.updateLogin(true);
  }
};
let id:any=ref<string>("")
// 图片数据
let imgData: any = ref<any>(null);

// 标签数据
let methodData: any = ref<any>(null);

// 相关笔记数据
let correlationData: any = ref<any>(null);

// 存储当前笔记的相关数据
let home: any = ref<Array<any>>([]);

// 收藏的笔记ID
let collect: any = ref<Array<any>>([]);
let path: any = ref<string>("");

let getCollection: (id: number) => void = (id: number): void => {
  // 调用收藏方法
  store.addCollectList(Number(id));
};
let getID: (id: number) => void = (id: number): void => {
  console.log(111)
};
//返回
let back: () => void = (): void => {
  router.push(path.value);
};
//添加喜欢
let addLikeList:(id:number)=>void=(id:number):void=>{
    if (uselogining.isLogining == 1) {
        store.addLikeList(Number(id))
    }else{
       // 跳转到登录界面
       uselogin.updateLogin(true)
    }
}
let clickcl = function (id: string) {
  getData(id)
};
let getData:(id:string)=>void=(id:string):void=>{
  let home: any = localStorage.getItem("home");
  home = JSON.parse(home).followList;
  path.value = route.params.path;
  axios
    .get("https://apis.netstart.cn/douguo/note/detail/" + id )
    .then((res) => {
      // 总数据
      data.value = res.data.result.note;
      console.log(data.value)
      signIn.value = data.value.straight_days
      userid = data.value.author.id;
      if (home.every((item: any) => item != userid)) {
        isAttention.value = false;
      } else {
        isAttention.value = true;
      }
      // 标签数据
      // 正则将 \n 转换成html的 <br> 标签
      if (res.data.result.note.contents.length > 0) {
        res.data.result.note.contents[0].c.replace(/[\n]/g, "<br />");
        methodData.value = res.data.result.note.contents[0].c;
      }
      // 笔记图片数据
      imgData.value = res.data.result.note.images;
    })
    .catch((err) => {
      console.log("err =>", err);
    });

  // 相关笔记数据
  axios
    .get("https://apis.netstart.cn/douguo/note/related/" + IDBDatabase  + "/0/20")
    .then((res) => {
      correlationData.value = res.data.result.list;
    })
    .catch((err) => {
      console.log(err);
    });
}
onMounted((): void => {
  id.value = route.params.id;
  getData(id.value)
  // 登录凭证
  let useLogining = localStorage.getItem("isLogin");
  if (useLogining) {
    uselogining.updateLogining(useLogining);
    let arr: any = localStorage.getItem("home");
    arr = JSON.parse(arr).followList;
    if (arr.every((item: any) => item != userid)) {
      isAttention.value = false;
    } else {
      isAttention.value = true;
    }
  } else {
    isAttention.value = false;
  }
});
</script>
<style scoped>
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.Attention {
  color: #fff;
  background-color: rgb(255, 197, 51);
}

.Attention.active {
  background-color: #e8e8e8;
  color: #999;
  font-weight: normal;
}

.big-img {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>
